//选项卡
var list = document.querySelectorAll(".list li");
var menu = document.querySelectorAll(".gallery-bottom>div");
//console.log(list);
//console.log(menu);
for(var i = 0; i < list.length; i++) {
	list[i].index = i;
	list[i].addEventListener('click', function() {
		for(var j = 0; j < list.length; j++) {
			list[j].classList.remove('active');
			menu[j].classList.remove('active');
		}
		this.classList.add('active');
		menu[this.index].classList.add('active');
	})
}
//头部
var head = document.querySelector("header");
//联系方式
var contact = document.querySelector(".banner .contact");
contact.addEventListener("click", function() {
	window.scrollTo({
		top: 3000,
		behavior: 'smooth'
	})
})
//进度条
var bar = document.querySelectorAll(".bar");
//楼层
var floor = document.querySelectorAll(".navbar-nav>li");
//自我评价
var learn = document.querySelectorAll(".project-title");
var self = document.querySelectorAll(".project-detail");
//footer
var liaMe = document.querySelector(".lia-me");
console.log(floor);
window.onscroll = function() {
	var height = document.documentElement.scrollTop || document.body.scrollTop;
	console.log(height);
	//头部
	if(height >= 500) {
		head.style.background = '#378C3F';
	} else {
		head.style.background = '';
	}
	//进度条
	for(var i = 0; i < bar.length; i++) {
		if(height >= 600) {
			bar[0].style.width = '80%';
			bar[1].style.width = '80%';
			bar[2].style.width = '60%';
			bar[3].style.width = '60%';
			bar[4].style.width = '70%';
			bar[5].style.width = '70%';
		} else {
			bar[i].style.width = '0%';
		}
	}
	//楼层
	for(var h = 0; h < floor.length; h++) {
		floor[h].style.background = '';
		if(height >= 500 && height < 800) {
			floor[0].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
		} else if(height >= 800 && height < 1200) {
			floor[1].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
		} else if(height >= 1200 && height < 2100) {
			floor[2].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
		} else if(height >= 2000 && height < 2700) {
			floor[3].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
		} else if(height >= 2700) {
			floor[4].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
			liaMe.style.transform='translateY(0px)'
		}
	}
	//自我评价
	for(var j = 0; j < learn.length; j++) {
		if(height >= 2000 && height < 2200) {
			learn[0].style.transform = 'translateX(0px)';
		} else if(height >= 2200 && height < 2400) {
			learn[1].style.transform = 'translateX(0px)';
		} else if(height >= 2400) {
			learn[2].style.transform = 'translateX(0px)';
		} else {
			learn[j].style.transform = 'translateX(-80px)';
		}
	}
	for(var k = 0; k < self.length; k++) {
		if(height >= 2000 && height < 2200) {
			self[0].style.transform = 'translateX(0px)';
		} else if(height >= 2200 && height < 2400) {
			self[1].style.transform = 'translateX(0px)';
		} else if(height >= 2400) {
			self[2].style.transform = 'translateX(0px)';
		} else {
			self[k].style.transform = 'translateX(90px)';
		}
	}
}

floor[0].addEventListener('click', function() {
	floor[0].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
	window.scrollTo({
		top: 500,
		//平滑滚动
		behavior: 'smooth'
	})
})
floor[1].addEventListener('click', function() {
	floor[1].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
	window.scrollTo({
		top: 800,
		behavior: 'smooth'
	})
})
floor[2].addEventListener('click', function() {
	floor[2].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
	window.scrollTo({
		top: 1200,
		behavior: 'smooth'
	})
})
floor[3].addEventListener('click', function() {
	floor[3].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
	window.scrollTo({
		top: 2200,
		behavior: 'smooth'
	})
})
floor[4].addEventListener('click', function() {
	floor[4].style.backgroundColor = ' rgba(255, 255, 255, 0.2)';
	window.scrollTo({
		top: 3100,
		behavior: 'smooth'
	})
})
